<template>
    <div style="margin-left: 30px; margin-top: 10px;">
        <!--表格头部-->
        <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="部门名称">
                <el-input  placeholder="请输入部门名称" v-model="sectionSearch"></el-input>
            </el-form-item>
            <el-form-item label="部门类型">
                <el-select v-model="typeSearch" placeholder="请选择">
                    <el-option label="请选择" :value=0></el-option>
                    <el-option label="总部" :value=1></el-option>
                    <el-option label="团餐" :value=2></el-option>
                    <el-option label="生鲜" :value=3></el-option>
                    <el-option label="央厨" :value=4></el-option>
                    <el-option label="外包" :value=5></el-option>
                    <el-option label="其他" :value=6></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否有效">
                <el-select v-model="statSearch" placeholder="请选择">
                    <el-option label="请选择" :value=10></el-option>
                    <el-option label="有效" value=1></el-option>
                    <el-option label="无效" value=0></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="selectSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="dept"
            style="width: 100%"
            border>
            <el-table-column
                prop="dept_id"
                label="部门编号"
                width="100"
                fixed>
            </el-table-column>
            <el-table-column
                prop="dept_name"
                label="部门名称"
                width="100">
            </el-table-column>
            <el-table-column
                prop="dept_code"
                label="部门代码"
                width="100">
            </el-table-column>
            <el-table-column
                prop="pin_name"
                label="拼音首字母"
                width="140">
            </el-table-column>
            <el-table-column
                prop="superior_dept_id"
                label="上级部门"
                width="120">
            </el-table-column>
            <el-table-column
                prop="dept_type"
                label="类型"
                width="90">
            </el-table-column>
            <el-table-column
                prop="dept_abreviation"
                label="部门简称"
                width="120">
            </el-table-column>
            <el-table-column
                prop="dept_addr"
                label="地址"
                width="90">
            </el-table-column>
            <el-table-column
                prop="dept_contact"
                label="联系人"
                width="90">
            </el-table-column>
            <el-table-column
                prop="dept_tel"
                label="联系方式"
                width="100">
            </el-table-column>
            <el-table-column
                prop="dept_remark"
                label="备注"
                width="90">
            </el-table-column>
            <el-table-column
                prop="dept_stat"
                label="是否有效"
                width="100">
            </el-table-column>
            <el-table-column
                prop="insert_time"
                label="新增时间"
                width="180"  fixed="right">
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next"
            :current-page="currentPage"
            :page-size="15"
            :total="count">
        </el-pagination>
    </div>
</template>
<script>
    //导入需要使用的方法
    import {getAllDept} from "../api/dept";
    export default {
        name: "deparList",
        //返回的数据，和页面交互
        data() {
            return {
                sectionSearch: "",
                typeSearch: 0,
                statSearch: 10,
                //中间加一层
                sectionGo: "",
                typeGo: 0,
                statGo: 10,
                    dept: [{
                    dept_id : "",
                    dept_name: "",
                    pin_name: "",
                    //生鲜系统分拣使用
                    dept_code: "",
                    superior_dept_id: "",
                    //总部、团餐、生鲜、央厨、外包、其他
                    dept_type: "",
                    dept_abreviation: "",
                    dept_addr: "",
                    dept_contact: "",
                    dept_tel: "",
                    dept_remark: "",
                    //0为否；1为是
                    dept_stat: "",
                    insert_time: ""
                }],
                currentRow: null,
                offset: 0,
                limit: 15,
                count: 0,
                currentPage: 1
            }
        },
        //在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
        created(){
            this.initData();
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //根据条件查询数据
            selectSubmit(){
                //中间加一层
                this.sectionGo = this.sectionSearch;
                this.typeGo = this.typeSearch;
                this.statGo = this.statSearch;
                this.getDept();
            },
            //初始化数据
            initData(){
                this.dept.splice(0);
                // this.trainReport.splice(0);
                this.getDept();
            },
            //绑定方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1)*this.limit;
                this.getTrain()
            },
            //请求获取数据
            getDept(){
                getAllDept({
                    begin: this.offset, limit: this.limit
                    ,stat: this.statGo, deptName: this.sectionGo
                    ,deptType: this.typeGo
                }).then((res) => {
                    this.count = res.Data.total;
                    this.dept = [];
                    res.Data.data.forEach(item => {
                        const Dept = {};
                            Dept.dept_id = item.id;
                            Dept.dept_name = item.dept_name;
                            Dept.pin_name = item.pin_name;
                            Dept.dept_code = item.dept_code;
                            Dept.superior_dept_id = item.superior_dept_id;
                            Dept.dept_type = item.dict_type_name;
                            Dept.dept_abreviation = item.dept_bbreviation;
                            Dept.dept_addr = item.addr;
                            Dept.dept_contact = item.contact;
                            Dept.dept_tel = item.tel;
                            Dept.dept_remark = item.remark;
                            Dept.insert_time = item.newTime;
                            Dept.dept_stat = item.dstat;
                            this.dept.push(Dept)
                    });
                    // res.queryList.forEach(item => {
                    //     const TrainDetail = {};
                    //     TrainDetail.section = item.dept_name;
                    //     TrainDetail.name = item.username;
                    //     TrainDetail.content = item.content;
                    //     TrainDetail.beginTime = item.begin_time;
                    //     TrainDetail.addUpTime = item.cumulative_time;
                    //     this.trainDetail.push(TrainDetail)
                    // });
                });
            }
        }
    }
</script>

<style scoped>

</style>
